@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-date-range-sheet {
  @extend .axiom-base-sheet;

  .content {
    @extend .axiom-base-sheet__content;
  }

  // 快速选项
  .quick-options {
    @extend .axiom-base-sheet__quick-options;
  }

  // 日期选择区域
  .date-selection {
    .date-input-group {
      @extend .axiom-base-sheet__date-input-group;
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .axiom-date-range-sheet {
    .date-selection {
      .date-input-group {
        flex-direction: column;
        gap: var(--axiom-spacing-md, 12px);
        
        .date-separator {
          order: -1;
          font-size: var(--axiom-font-size-sm, 13px);
        }
      }
    }
  }
}

// Cyberpunk 主题专属“特效”
html.theme-cyberpunk .axiom-date-range-sheet {
  background: var(--glass-bg, rgba(17, 17, 24, 0.85));
  backdrop-filter: blur(var(--backdrop-blur, 15px));
  border-top: 1px solid var(--glass-border, rgba(0, 255, 255, 0.25));
  box-shadow: var(--secondary-glow, 0 0 20px rgba(0, 223, 255, 0.4));

  .quick-options .axiom-button {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.3);
    color: var(--text-color-secondary);

    &:hover {
      background-color: rgba(0, 255, 255, 0.2);
      border-color: var(--primary-color);
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }
  }

  .date-selection .date-input-group {
    .el-input__wrapper {
      background-color: var(--bg-color-tertiary, #1a1a2e) !important;
      border: 1px solid var(--border-color-emphasis, #0f3460);
      box-shadow: none !important;
      
      input {
        color: var(--text-color, rgba(255, 255, 255, 0.95));
      }
    }

    .date-separator {
      color: var(--primary-color);
      text-shadow: var(--primary-glow);
    }
  }
  
  .wheel-picker-container::before {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: rgba(var(--primary-color-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.3);
  }
  
  .wheel-picker .wheel-column .wheel-list .wheel-item.active {
    text-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.6);
  }
}